<template>
  <basic-container :btnFlag=true>
    <div class="card-border">
      <card-header :header-data="headerData"></card-header>
      <el-form
        label-width="130px"
        :model="subjectForm"
        style="padding-right: 30px;"
        :rules="subjectInfosrules"
        ref="subjectForm">
        <el-row>
          <el-col :span="20" style="margin-top: 27px;">
            <el-form-item class="form-item" label="监测项名称 :" prop="name">
              <el-input v-model="subjectForm.name" placeholder="请输入监测项名称"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item class="form-item" label="上报周期 :" prop="submitPeriod">
              <el-select
                v-model="subjectForm.submitPeriod"
                placeholder="请选择"
                style="width: 280px;">
                <el-option
                  v-for="item in natureDICzhouqi"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item class="form-item" label="是否可量化 :" prop="quantifiable">
              <el-select
                v-model="subjectForm.quantifiable"
                placeholder="请选择"
                style="width: 280px;"
              >
                <el-option
                  v-for="item in natureDIC"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
       <!-- <el-row>
          <el-col :span="12">
            <el-form-item class="form-item" label="类型 :" prop="type">
              <el-select
                v-model="subjectForm.type"
                placeholder="请选择"
                style="width: 280px;">
                <el-option
                  v-for="item in natureDICType"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>-->
        <el-row>
          <el-col :span="24">
            <el-form-item class="form-item" label="起止日期 :" prop="startDate" style="float: left;">
              <div>
                <el-date-picker
                  v-model="subjectForm.startDate"
                  type="datetime"
                  placeholder="选择日期"
                  value-format="yyyy-MM-dd"
                  format="yyyy-MM-dd"
                >
                </el-date-picker>
                &nbsp;&nbsp;至&nbsp;&nbsp;
                <el-date-picker
                  v-model="subjectForm.endDate"
                  type="datetime"
                  placeholder="选择日期"
                  value-format="yyyy-MM-dd"
                  format="yyyy-MM-dd"
                >
                </el-date-picker>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item class="form-item" label="总目标 :" prop="totalTarget">
              <el-input v-model="subjectForm.totalTarget" placeholder="请输入总目标"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item class="form-item" label="总目标单位 :" prop="totalTargetUnit">
              <el-input v-model="subjectForm.totalTargetUnit" placeholder="请输入总目标单位"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="15">
            <el-form-item label="责任部门:" prop="leadDeptId" class="form-item">
              <span style="font-size: 16px">{{subjectForm.orgName}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="9">
            <el-form-item class="form-item" label="类型 :" prop="type">
              <el-select
                v-model="subjectForm.type"
                placeholder="请选择"
                style="width: 157px;">
                <el-option
                  v-for="item in natureDICType"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="18">
            <el-form-item class="form-item" label="配合部门:">
              {{subjectForm.supportDeptName}}
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-button size="small" type="primary" icon="el-icon-plus" style="margin-left: 10px;" @click="clickAssortDept">
              配合部门
            </el-button>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="22">
            <el-form-item class="form-item" label="描述 :" prop="description">
              <el-input
                type="textarea"
                :autosize="{ minRows: 4, maxRows: 4}"
                placeholder="请输入描述"
                v-model="subjectForm.description"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <div style="float: right;margin-right: 5px;">
        <el-button type="primary" size="mini" @click.stop="showAddTarget()">新增目标</el-button>
      </div>
      <avue-crud
        :data="tableData"
        :option="option"
        :page="page"
        class="avuecrud"
      >
        <template slot-scope="scope" slot="menu">
          <div class="menu-title" @click.stop="delTarget(scope.row,scope.index)">
            <i class="iconfont iconview icon-primary"></i>
            <p class="menu-title-text">删除</p>
          </div>
        </template>
      </avue-crud>
      <div class="form-submit">
        <el-button type="primary" @click.stop="commitList()">添加</el-button>
        <el-button type="info" @click.stop="goBack()">关闭</el-button>
      </div>
      <dept-check :visible="supportDeptVisible" @getCheckInfo="getSupportDeptCheckInfo"
                  @cancel="cancelSupportDept"></dept-check>
    </div>
    <el-dialog title="新增目标" :visible.sync="addTargetVisible" width="1000px">
      <el-form
        label-width="130px"
        :model="addTargetForm"
        style="padding-right: 30px;"
        :rules="addTargetRules"
        ref="addTargetForm"
      >
        <el-row>
          <el-col :span="18" style="margin-top: 27px;">
            <el-form-item class="form-item" label="年份 :" prop="year">
              <!--<el-input v-model="addTargetForm.year" placeholder="请输入年份"></el-input>-->
              <el-date-picker
                v-model="addTargetForm.year"
                type="year"
                placeholder="请输入年份"
                value-format="yyyy"
                format="yyyy"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="18" style="margin-top: 27px;">
            <el-form-item class="form-item" label="目标值 :" prop="targetValue">
              <el-input v-model="addTargetForm.targetValue" placeholder="请输入目标值"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="18" style="margin-top: 27px;">
            <el-form-item class="form-item" label="目标值单位 :" prop="targetValueUnit">
              <el-input v-model="addTargetForm.targetValueUnit" placeholder="请输入目标值单位"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="18" style="margin-top: 27px;">
            <el-form-item class="form-item" label="目标内容 :" prop="targetContent">
              <el-input type="textarea" :autosize="{ minRows: 4, maxRows: 4}"
                          v-model="addTargetForm.targetContent" placeholder="请输入目标内容"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelTargetWindow()">关闭</el-button>
        <el-button type="primary" @click="addTarget()">保存</el-button>
      </div>
    </el-dialog>
  </basic-container>
</template>

<script>
  import {pimWorkingItemRules,addTargetRules} from "@/const/infoRules";
  import {addWorkingItem} from "@/api/pim/pim";
  import {mapGetters} from "vuex";

  export default {
    name: "addWorkItem",
    created() {
      this.subjectForm.pmuc = this.$route.query.pmuc;
      this.subjectForm.planningTitle = this.$route.query.titleName;
      this.subjectForm.ditemId = Number(this.$route.params.id);
      this.subjectForm.leadDeptId = this.deptInfo.deptId;
      this.subjectForm.orgName = this.deptInfo.name;
      this.tableData = []
    },
    computed: {
      ...mapGetters([
        "deptInfo"
      ])
    },
    data() {
      return {
        headerData: {
          title: '增加监测项'
        },
        subjectInfosrules: pimWorkingItemRules,// 表单验证
        addTargetRules:addTargetRules,
        xieorgCodeVisiblesubmit: false,//配合部门树弹窗标志
        addTargetVisible: false,
        subjectForm: {
          pmuc: '',
        },
        addTargetForm: {
        },
        natureDIC: [
          {
            label: '是',
            value: true
          },
          {
            label: '否',
            value: false
          },
        ],
        natureDICzhouqi: [
          {
            label: '年报',
            value: '1'
          },
          {
            label: '季报',
            value: '2'
          },
          {
            label: '月报',
            value: '3'
          },
        ],
        natureDICType: [
          {
            label: '指标',
            value: '1'
          },
          {
            label: '任务',
            value: '2'
          },
          {
            label: '目标',
            value: '3'
          },
        ],
        page: {
          total: 0, // 总页数
          currentPage: 1, // 当前页数
          pageSize: 10 // 每页显示多少条
        },
        tableData: [],
        option: {
          page: true,
          addBtn: false,
          editBtn: false,
          indexLabel: "序号",
          index: true,
  indexWidth:70,
          cellBtn: false,
          delBtn: false,
          columnBtn: false,
          refreshBtn: false,
          filterBtn: false,
          searchBtn: false,
          menuWidth: 100,
          keyId: "id",
          column: [{
            label: "年份",
            prop: "year",
            cell: true
          },
            {
              label: "目标值",
              width: 250,
              prop: "targetValue",
              cell: true
            },
            {
              label: "目标值单位",
              width: 200,
              prop: "targetValueUnit",
              cell: true
            },
            {
              label: "目标内容",
              width: 250,
              prop: "targetContent",
              cell: true
            },
          ]
        },
        tableLoading: false,
        supportDeptVisible:false,
      }
    },
    methods: {
      goBack() {
        this.$router.go(-1);
      },
      commitList() {
        this.subjectForm.targetDTOList=this.tableData;
        this.$confirm("确定添加监测项?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          this.$refs.subjectForm.validate(valid => {
            if (valid) {
              addWorkingItem(this.subjectForm).then(response => {
                if (response.data.code == 0) {
                  this.$notify({
                    title: "成功",
                    message: "添加成功",
                    type: "success",
                    duration: 2000
                  });
                  this.$router.go(-1);
                }
              })
            }
          })
        })
      },
      //弹出选择配合部门弹框
      clickAssortDept(){
        this.supportDeptVisible = true;
      },
      cancelSupportDept(){
        this.supportDeptVisible = false;
      },
      getSupportDeptCheckInfo(deptIds, deptNames) {
        this.subjectForm.supportDeptName = deptNames;
        this.subjectForm.cooDeptId = deptIds;
        this.supportDeptVisible = false;
      },
      showAddTarget() {
        this.addTargetVisible = true
      },
      addTarget() {
        this.$refs.addTargetForm.validate(valid => {
          if (valid) {
            this.tableData.push(this.addTargetForm);
            this.addTargetVisible = false;
            this.addTargetForm = {};
          }
        })
      },
      cancelTargetWindow(){
        this.addTargetVisible = false;
      },
      delTarget(row, index){
        this.tableData.splice(index,1)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .card-border {
    border: 1px solid #d2d2d2;
    padding: 12px;
  }

  .form-submit {
    text-align: center;
  }

  .form-item {
    font-weight: 600;
  }
</style>
